<template>
  <div class="app-container">
    <!--工具栏-->
    <div class="head-container">
      <div ref="ele">
        <!-- 搜索 -->
        <el-input v-model="query.carNumber" clearable placeholder="输入车牌号" style="width: 200px" class="filter-item" @keyup.enter.native="crud.toQuery" />
        <el-select
            v-model="query.vehicleTypeId"
            clearable
            size="small"
            placeholder="请选择车辆类型"
            class="filter-item"
            style="width: 140px"
            @change="crud.toQuery"
        >
          <el-option
              v-for="item in options"
              :key="item.id"
              :label="item.name"
              :value="item.id"
          />
        </el-select>
        <!--<el-select v-model="query.status" clearable placeholder="状态" class="filter-item" style="width: 130px"  @change="crud.toQuery">
          <el-option label="已通过" value="VALID" />
          <el-option label="审核中" value="DOING" />
          <el-option label="未通过" value="INVALID" />
        </el-select>-->
        <rrOperation />
      </div>
      <crudOperation :permission="permission">
        <template slot="right">
          <el-button
              v-permission="['admin','driverManageMerchant:add']"
              class="filter-item"
              size="mini"
              type="primary"
              icon="el-icon-plus"
              @click="createBtnClick"
          >添加司机
          </el-button>
        </template>
        <!--<template slot="right">
          <el-button
              v-permission="['admin','driverManageMerchant:relevance']"
              class="filter-item"
              size="mini"
              type="success"
              icon="el-icon-edit"
              :loading="operationLoading"
              :disabled="crud.selections.length === 0"
              @click="info(crud.selections)"
          >关联车辆
          </el-button>
        </template>-->
      </crudOperation>
    </div>
    <!--表格渲染-->
    <el-table ref="table" :height="tableHeight" border v-loading="crud.loading" :data="crud.data" highlight-current-row style="width: 100%" @selection-change="crud.selectionChangeHandler" @current-change="handleCurrentChange">
      <el-table-column type="selection" width="50" label="序号" />
      <el-table-column prop="name" label="姓名"  />
      <el-table-column prop="username" label="电话"  />
      <el-table-column label="状态" align="center" >
        <template slot-scope="scope">
          <el-tag :type="scope.row.status === 1 ? 'success' : 'warning'">
            {{ scope.row.status === 1 ? '已关联' :
              scope.row.status === 0 ? '待关联' :
              scope.row.status === 2 ? '已拒绝' :
              scope.row.status === 3 ? '已解绑' :
                  '-' }}
          </el-tag>
        </template>
      </el-table-column>
     <!-- <el-table-column label="绑定的车辆" align="center" >
        <template slot-scope="scope">
          <el-popover
            placement="right"
            width="400"
            trigger="click">
            <el-table :data="scope.row.drivingCar">
              <el-table-column width="120" property="carNumber" label="车牌号"></el-table-column>
              <el-table-column width="120" property="typeName" label="车辆类型"></el-table-column>
              <el-table-column width="120" property="carLength" label="车辆长度"></el-table-column>
            </el-table>
            <span v-if="!scope.row.drivingCar">0</span>
            <el-button v-else slot="reference" >
              {{ scope.row.drivingCar.length}}
            </el-button>
          </el-popover>
        </template>
      </el-table-column>-->
      <el-table-column label="状态" align="center" >
        <template slot-scope="scope">
          <el-tag :type="scope.row.freeze === 0 ? 'success' : 'warning'">
            {{ scope.row.freeze === 1 ? '正常' :
              scope.row.freeze === 0 ? '冻结' :
                  '-' }}
          </el-tag>
        </template>
      </el-table-column>
     <!-- <el-table-column label="关联车辆" align="center" width="100" prop="">
        <template slot-scope="scope">
          <span>1</span>
          <span v-if="!scope.row.status"></span>
          <i v-else class="link" @click="changeDriverDetail(scope.row)">
            &lt;!&ndash;{{ scope.row.carOwnerNum}}&ndash;&gt;

               <el-tag type="success"  >
              查看
            </el-tag>
            </i>
        </template>
      </el-table-column>-->
      <el-table-column prop="applyTime" label="时间" show-overflow-tooltip>
        <template slot-scope="scope">
          {{scope.row.applyTime}}
        </template>
      </el-table-column>
      <el-table-column label="操作" align="center" fit fixed="right">
        <template slot-scope="scope">
          <!--<el-button size="mini" type="success" v-if="scope.row.status === 0 && scope.row.type === 1"
                     icon="el-icon-delete"
                     v-permission="['admin','driverList:enable']"
                     @click="changeEnabledInfo(scope.row,true)">同意</el-button>
          <el-button size="mini" type="danger"
                     icon="el-icon-delete"
                     v-if="scope.row.status === 0 && scope.row.type === 1"
                     v-permission="['admin','driverList:enable']"
                     @click="changeEnabledInfo(scope.row,false)">拒绝</el-button>-->
         <!-- <el-button size="mini" type="success"
                     v-if="scope.row.freeze === 0"
                     icon="el-icon-delete"
                     v-permission="['admin','driverManageMerchant:unfreeze']"
                     @click="changeEnabledunfreeze(scope.row,true)">解冻</el-button>
          <el-button size="mini" type="danger"
                     icon="el-icon-delete"
                     v-if="scope.row.freeze === 1"
                     v-permission="['admin','driverManageMerchant:unfreeze']"
                     @click="changeEnabledunfreeze(scope.row,false)">冻结</el-button>-->
          <el-button size="mini" type="success"
                     icon="el-icon-delete"
                     v-if="scope.row.status === 2 || scope.row.status === 3"
                     v-permission="['admin','driverManageMerchant:onceAgain']"
                     @click="changeEnabledonceAgain(scope.row,true)">再次添加司机</el-button>
          <!--<el-button size="mini" type="success"
                     icon="el-icon-delete"
                     v-if="scope.row.status === 1"
                     v-permission="['admin','driverManageMerchant:unbundle']"
                     @click="changeEnabledunbundle(scope.row,true)">解绑司机</el-button>-->
        </template>
      </el-table-column>
    </el-table>
    <!--分页组件-->
    <pagination />
    <el-dialog append-to-body :close-on-click-modal="false" :visible.sync="isShow" @close="cancel" title="关联车辆详情" width="350px">
      <el-table ref="form" :data="form" size="mini" >
        <el-table-column prop="username" align="center" label="用户账号" width="90" />
        <el-table-column prop="userType" align="center" label="用户类型" width="90" show-overflow-tooltip>
          <template slot-scope="scope">
            <el-tag :type="scope.row.userType === 4 ? 'success' : 'warning'">
              {{ scope.row.userType | userTypeFilter}}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column label="商户名称" align="center" show-overflow-tooltip width="130">
          <template slot-scope="scope">
            {{scope.row.merchantName | nullFilter}}
          </template>
        </el-table-column>
      </el-table>
      <div slot="footer" class="dialog-footer">
        <el-button @click="cancel">取消</el-button>
      </div>
    </el-dialog>

    <div class="panel">
      <form-panel v-if="showFormPanel" :showFormPanel.sync="showFormPanel" :item="selectedItem" v-on:refreshList="crud.toQuery"></form-panel>
    </div>
    <div class="panel">
      <formInfo-panel v-if="showFormInfoPanel" :showFormInfoPanel.sync="showFormInfoPanel" :item="selectedInfoItem" v-on:refreshList="crud.toQuery"></formInfo-panel>
    </div>
  </div>
</template>

<script>
import crudDriverList from '@/api/vehicleManages/driverList'
import MyImg from '@/components/img/img'
import CRUD, {crud, header, presenter} from '@crud/crud'
import rrOperation from '@crud/RR.operation'
import crudOperation from '@crud/CRUD.operation'
import pagination from '@crud/Pagination'
import Form from './form'
import FormInfo from './formInfo'

export default {
  filters: {
    roleFilter: function (val) {
      if (val) {
        return val
      } else {
        return '-'
      }
    },
    nullFilter: function (value) {
      return (!value && value !== 0) ? '-' : value
    },
  },
  name: 'DriverManageFail',
  components: { MyImg, pagination, crudOperation, rrOperation,'form-panel': Form,'formInfo-panel': FormInfo },
  cruds() {
    return CRUD({ title: '司机管理', url: 'api/driverManageMerchant/listFail', crudMethod: { ...crudDriverList }})
  },
  mixins: [presenter(), header(), crud()],
  data() {
    return {
      height: this.getTableHeight({}),
      tableHeight: this.height,
      operationLoading: false,
      isShow: false,
      showFormPanel: false,
      showFormInfoPanel: false,
      selectedItem: {},
      selectedInfoItem: {},
      currentRow: null,
      options: [],
      formInfo: [],
      carstatusIn: [
        { key: 1, value: '正常' },
        { key: 0, value: '停用' },
      ],
      permission: {
      },
      reviewStatusList: [
        { key: 'DOING', display_name: '待审核' },
        { key: 'VALID', display_name: '审核通过' },
        { key: 'INVALID', display_name: '审核不通过' }
      ],
      rules: {
        comments: [
          { required: true, message: '请输入审批原因', trigger: 'blur' }
        ]
      }
    }
  },
  created() {
    this.crud.optShow = {
      reset: true,
      add: false,
      edit: false,
      del: false,
      download: false
    }
  },
  methods: {
    changeDriverDetail(data) {
      let self = this
      self.formInfo = data
      self.isShow = true
    },
    cancel () {
      this.isShow = false
      this.formInfo = []
      this.$emit('update:isShow', this.isShow)
    },
    createBtnClick (value) {
      this.selectedItem = {falg: true}
      this.showFormPanel = true
    },
    editBtnClick (row) {
      let self = this
      let updateData = self.crud.selections
      if (updateData.length > 1) {
        self.$message({
          message: '不能同时修改多行',
          type: 'warning'
        })
      } else if (updateData.length < 1) {
        self.$message({
          message: '请选择一行数据',
          type: 'warning'
        })
      } else {
        self.selectedItem = Object.assign({}, updateData[0])
        self.selectedItem.appShow = updateData[0].appShow ? 'true' : 'false'
        self.selectedItem.falg = true
        self.showFormPanel = true
      }
    },
    info (datas) {
      let self = this
      let updateData = datas
      if (updateData.length > 1) {
        self.$message({
          message: '不能同时操作多行',
          type: 'warning'
        })
      } else if (updateData.length < 1) {
        self.$message({
          message: '请选择一行数据',
          type: 'warning'
        })
      } else {
        self.selectedInfoItem = Object.assign({}, datas[0])
        self.showFormInfoPanel = true;
      }
    },
    changeEnabledunfreeze(data,falg) {
      let self = this
      let text = falg ? '解冻该条数据吗, 是否继续？' : '冻结这该数据吗, 是否继续？'
      self.$confirm('确定' + text, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        let parm = {
          id: data.ownerDrivingId,
          falg: falg
        }
        crudDriverList.unfreeze(parm).then(res => {
          self.crud.notify('请求成功', CRUD.NOTIFICATION_TYPE.SUCCESS)
          self.crud.toQuery()
        }).catch(() => {
          // data.dataStatus = !data.dataStatus
        })
      }).catch(() => {
        // data.dataStatus = !data.dataStatus
      })
    },
    changeEnabledInfo(data,falg) {
      let self = this
      let text = falg ? '同意这该请求, 是否继续？' : '拒绝这该请求, 是否继续？'
      self.$confirm('确定' + text, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        let parm = {
          id: data.ownerDrivingId,
          falg: falg
        }
        crudDriverList.updateStatus(parm).then(res => {
          self.crud.notify('请求成功', CRUD.NOTIFICATION_TYPE.SUCCESS)
          self.crud.toQuery()
        }).catch(() => {
          // data.dataStatus = !data.dataStatus
        })
      }).catch(() => {
        // data.dataStatus = !data.dataStatus
      })
    },
    changeEnabledunbundle(data,falg) {
      let self = this
      let text = falg ? '解绑该司机吗？ 是否继续？' : '拒绝这该请求, 是否继续？'
      self.$confirm('确定' + text, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        let parm = {
          id: data.ownerDrivingId,
          falg: falg
        }
        crudDriverList.unbundle(parm).then(res => {
          self.crud.notify('请求成功', CRUD.NOTIFICATION_TYPE.SUCCESS)
          self.crud.toQuery()
        }).catch(() => {
          // data.dataStatus = !data.dataStatus
        })
      }).catch(() => {
        // data.dataStatus = !data.dataStatus
      })
    },
    changeEnabledonceAgain(data,falg) {
      let self = this
      let text = falg ? '再次添加司机, 是否继续？' : '拒绝这该请求, 是否继续？'
      self.$confirm('确定' + text, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        let parm = {
          id: data.ownerDrivingId
        }
        crudDriverList.onceAgain(parm).then(res => {
          self.crud.notify('请求成功', CRUD.NOTIFICATION_TYPE.SUCCESS)
          self.crud.toQuery()
        }).catch(() => {
          // data.dataStatus = !data.dataStatus
        })
      }).catch(() => {
        // data.dataStatus = !data.dataStatus
      })
    },
    handleSizeChange(val) {
      this.size = val
      this.page = 1
      this.vehicleAuthList()
    },
    handleCurrentChange1(val) {
      this.page = val
      this.vehicleAuthList()
    },
    changeDetail(data) {
      let carNumber = data.carNumber
      this.$alert('<div>车牌号 {{data.carNumber}} 片段</div>', '绑定的车辆', {
        dangerouslyUseHTMLString: true
      });
    },
    vehicleAuthList(){
      let self = this

      let page = self.page > 0 ? self.page - 1 : self.page
      let parm = {
        'direction': 'DESC',
        'page': page,
        'size': this.size,
        userId : self.userId,
        ...self.crud.query
      }
      crudVehicleOwnerManagement.detail(parm).then(res => {
        if (res.ok){
          self.tableData = res.data.content
          self.total = res.data.totalElements
        }
      }).catch(() => {
        // data.dataStatus = !data.dataStatus
      })
    },
    handleCurrentChange(row) {
      this.currentRow = JSON.parse(JSON.stringify(row))
    },
    getCategory(){
      let self = this
      self.$http.get("/api/vehicleType/getVehicleType").then(function(value) {
        self.options = value
      })
    },
    // 选中图标
    selected1(name) {
      this.form.img = name
    },
    selected2(name) {
      this.form.smallImg = name
    }
  },
  mounted: function () {
    this.tableHeight =  this.height - this.$refs.ele.clientHeight
    this.getCategory()
  }
}
</script>

<style scoped>
  .el-row {
    margin-bottom: 20px;
    &:last-child {
       margin-bottom: 0;
     }
  }
  .el-col {
    border-radius: 4px;
  }
  .bg-purple-dark {
    background: #99a9bf;
  }
  .bg-purple {
    background: #d3dce6;
  }
  .bg-purple-light {
    background: #e5e9f2;
  }
  .grid-content {
    border-radius: 4px;
    min-height: 36px;
  }
  .row-bg {
    padding: 10px 0;
    background-color: #f9fafc;
  }
</style>
